<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/page" prefix="page"%>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"  %>



	<script src="/scripts/jquery-tools/jquery.tools.min.js"></script>	
	<style> 
		/* 
			debug
			body {padding:0;background-color: #000000}
		*/
		body {padding:0;}
		 
		img {
			border:0;		
		}
		
		
		/* 전체 레이아웃 */ 
		#scroll {
			position:relative;
			height:;
			overflow:hidden;
			border:1px solid #ddd;
			width:970px;
			padding:15px;
			height:340px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
		}
		
		
		/* 이미지 설정 */ 
		#tools {
			width:9999em;
			position:absolute;
			height:400px;
		}
		 
		.tool {
			float:left;
			width:1000px;
			height:340px;
			text-align:center;
		}
		 
		.details {
			font-size:18px;
			color:#555;
			margin-top:-20px;
			background-color:transparent;
			padding:5px 148px;
		}
		 
		
		/* 메뉴 설정 */ 
		#thumbs {
			background:url(/img/scroll/demo-navi.jpg) no-repeat;
			height:90px;
			position:absolute;
			top:290px;
			width:990px;
			left:-8px;
		}
		 
		.t {
			padding:0 !important;
			border:0 !important;
		}
		 
		.t a {
			background:transparent url(/img/scroll/demo-navi.jpg) no-repeat scroll -21px -90px;
			margin-left:11px;
			display:block;
			width:99px;
			float:left;
			height:90px;
			cursor:pointer;
		}
		 
		.t a.active {
			cursor:default !important;
		}
		 
		.navi {
			margin-left:314px;
			_margin-left:304px;
		}
		 
		 
		/* CSS sprite for the navigation */
		#t0 		  { margin-left:20px; _margin-left:10px;}
		#t0.active { background-position:-21px 0 !important; }
		#t0:hover  { background-position:-21px -180px; }
		#t0:active { background-position:-21px -270px; }
		 
		#t1			{ background-position:-325px -90px; }
		#t1:hover 	{ background-position:-325px -180px; }
		#t1:active	{ background-position:-325px -270px; }
		#t1.active	{ background-position:-325px 0 !important; }
		 
		#t2			{ background-position:-435px -90px; }
		#t2:hover 	{ background-position:-435px -180px; }
		#t2:active	{ background-position:-435px -270px; }
		#t2.active	{ background-position:-435px 0 !important; }
		 
		#t3			{ background-position:-545px -90px; }
		#t3:hover 	{ background-position:-545px -180px; }
		#t3:active	{ background-position:-545px -270px; }
		#t3.active	{ background-position:-545px 0 !important; }
		 
		#t4			{ background-position:-655px -90px; }
		#t4:hover 	{ background-position:-655px -180px; }
		#t4:active	{ background-position:-655px -270px; }
		#t4.active	{ background-position:-655px 0 !important; }
		 
		#t5			{ background-position:-765px -90px; }
		#t5:hover 	{ background-position:-765px -180px; }
		#t5:active	{ background-position:-765px -270px; }
		#t5.active	{ background-position:-765px 0 !important; }
		 
		#t6			{ background-position:-875px -90px; }
		#t6:hover 	{ background-position:-875px -180px; }
		#t6:active	{ background-position:-875px -270px; }
		#t6.active	{ background-position:-875px 0 !important; }
	</style>



<!-- root element for everything -->
<div id="scroll">
 
	<!-- scrollable items -->
	<div id="tools">
 
 
		<!-- empty slot -->
		<div class="tool">&nbsp;</div>
 
		<!-- 메뉴1 : 운영진 -->
		<div class="tool"> 
			<a href="/intro/people">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_1.jpg"/>
			</a>
 
			<div class="details">
				<strong>자바카페와 함께하는 운영진을 소개합니다.</strong>
			</div> 
		</div>
 
		<!-- 메뉴2 : 갤러리 -->
		<div class="tool">
			<a href="/community/home">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_2.jpg"/>
			</a>
 
			<div class="details">
				<strong>함께해서 더욱 즐거웠던 추억속으로 들어가볼까요?</strong>
			</div> 
		</div>
 
		<!-- 메뉴3 : 동호회 -->
		<div class="tool">
			<a href="/community/home">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_3.jpg"/>
			</a>
 
			<div class="details">
				<strong>스터디팀을 소개합니다.</strong>
			</div>
		</div>
 
		<!-- 메뉴4 : 강좌 -->
		<div class="tool">
			<a href="/board/list/BBS_ID/QNA_002">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_4.jpg"/>
			</a>
 
			<div class="details">
				<strong>자바카페에서 준비한 온라인 강좌입니다.</strong>
			</div>
		</div>
 
		<!-- 메뉴5 : 리뷰 -->
		<div class="tool">
			<a href="/board/list/BBS_ID/BLG_004">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_5.jpg"/>
			</a>
 
			<div class="details">
				<strong>어떤 IT 도서를 읽어볼까요?</strong>
			</div> 
		</div>
 
		<!-- 메뉴6 : 추천사이트 -->
		<div class="tool">
			<a href="/intro/site">
				<img  style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_6.jpg"/>
			</a>
 
			<div class="details">
				<strong>유용한 사이트를 소개합니다.</strong>
			</div>
		</div>
 
	</div>
 
	<!-- intro "page" -->
	<div id="intro" class="tool">
 		<img style="margin:-17px 0 28px 0" width="720" height="250" src="/img/scroll/scroll_image_main.jpg" /> 
	</div>
 
	<!-- required for IE6/IE7 -->
	<br clear="all" />
 
	<!-- thumbnails -->
	<div id="thumbs" class="t">
 
		<!-- intro page navi button -->
		<a id="t0" class="active"></a>
 
		<!-- scrollable navigator root element -->
		<div class="navi">
			<a style="display:none"></a>
			<a id="t1"></a>
			<a id="t2"></a>
			<a id="t3"></a>
			<a id="t4"></a>
			<a id="t5"></a>
			<a id="t6"></a>
		</div>
 
	</div>
 
</div>
 
<script> 
// initialize scrollable and return the programming API
var api = $("#scroll").scrollable({
	items: '#tools'
 
// use the navigator plugin
}).navigator().data("scrollable");
 
 
// this callback does the special handling of our "intro page"
api.onBeforeSeek(function(e, i) {
 
	// when on the first item: hide the intro
	if (i) {
		$("#intro").fadeOut("slow");
 
		// dirty hack for IE7-. cannot explain
		if ($.browser.msie && $.browser.version < 8) {
			$("#intro").hide();
		}
 
	// otherwise show the intro
	} else {
		$("#intro").fadeIn(1000);
	}
 
	// toggle activity for the intro thumbnail
	$("#t0").toggleClass("active", i == 0);
});
 
 
 
// a dedicated click event for the intro thumbnail
$("#t0").click(function() {
 
	// seek to the beginning (the hidden first item)
	$("#scroll").scrollable().begin();
 
});


 
</script>




	
	
	
	
	
	
	
	
	
	